<!DOCTYPE html>
<html lang="en" th:fragment="layout (top_css_source, top_js_source, main_content)" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link data-n-head="true" rel="icon" type="image/x-icon" href="images/logo-without-name.ico">
    <title th:text="${siteConfig.siteName}"></title>
    <meta name="keywords" th:content="${siteConfig.keywords}">
    <meta name="description" th:content="${siteConfig.siteDesc}">
    <link href="css/reset.css" type="text/css" rel="stylesheet" />
    <link href="css/common.css" type="text/css" rel="stylesheet" />
    <th:block th:replace="${top_css_source}" />
    <!--<link href="plugins/nprogress/nprogress.css" type="text/css" rel="stylesheet"/>-->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <!--<script type="text/javascript" src="plugins/nprogress/nprogress.js"></script>-->
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/vconsole.min.js"></script>
    <th:block th:replace="${top_js_source}" />
</head>

<body>
    <input id="site_attr_info" type="hidden" th:value="${siteConfig.attributeStr}" />
    <div class="flex-col">
        <!-- 顶部固定条 -->
        <div class="top-fixed">
            <div class="top-wrapper flex-row">
                <div class="menu-icon flex-row h-center v-center flex-fixed-item">
                    <img src="images/menu-icon.png" />
                    <img class="small noshow" src="images/menu-close-icon.png" />
                </div>
                <div class="logo-area flex-auto-item flex-row v-center">
                    <a href="/">
                        <img src="images/logo.svg" alt="logo" class="logo-top">
                    </a>
                </div>
                <div class="reflesh-area mobile flex-fixed-item">
                    <a id="refleshBtn" href="javascript:void(0)"><img src="images/reflesh.png" /></a>
                </div>
                <div class="search-area flex-fixed-item">
                    <a id="searchBtn" href="javascript:void(0)"><img src="images/search.png" /></a>
                </div>
            </div>
        </div>
        <div th:replace="${main_content}"></div>
    </div>
    <!--搜索层布局-->
    <div class="search-layer">
        <div class="content">
            <div class="top flex-row h-center v-center">
                <div class="flex-row search-inupt-container">
                    <a href="javascript:void(0)" class="search-input-icon flex-row h-center v-center">
                        <img src="images/search-pre-icon.png" />
                    </a>
                    <div class="flex-row h-center v-center search-input-area">
                        <input id="txtSearch" placeholder="输入内容进行搜索" type="text" class="txt-search" autocomplete="off"
                            maxlength="18" />
                    </div>
                    <a href="javascript:searchByText()" class="search-input-btn text-center">GO</a>
                </div>
            </div>
            <div class="def-list">
                <div class="fl def-list-item">
                    <svg x="0px" y="0px" xml:space="preserve" class="sprite--spring-menu-icon injected-svg"
                        viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" role="img" id="Springmenuicon"
                        data-src="/wp-content/uploads/aqua-svg-sprite/aqua-svg-general-sprite.svg#spring-menu-icon">
                        <path
                            style="fill: rgb(70, 81, 99); stroke: rgb(255, 255, 255); stroke-width: 2px; stroke-miterlimit: 10; stroke-dasharray: 132px, 134px; stroke-dashoffset: 0px;"
                            role="presentation"
                            d="M1,21.917A20.917,20.917 0,1,1 42.834,21.917A20.917,20.917 0,1,1 1,21.917"></path>
                        <g role="presentation">
                            <g>
                                <path
                                    style="fill: rgb(99, 177, 117); stroke-dasharray: 111px, 113px; stroke-dashoffset: 0px;"
                                    d="M29.124,17.829c-5.038-6.388-18.67-8.375-17.621-7.142c4.482,5.272,1.616,11.32,4.486,15.697    c2.161,3.295,6.809,3.904,9.614,3.963c0,0,0.905,2.552,1.092,5.55c0.062,1.008,2.176,0.766,2.154-0.073    c-0.28-10.628-11.699-20.397-11.699-20.397s9.465,3.334,12.772,13.188C30.757,26.992,32.84,22.541,29.124,17.829L29.124,17.829z     M29.124,17.829">
                                </path>
                            </g>
                        </g>
                    </svg>
                    <h4>🔥Java程序员进阶之路</h4>
                    <hr>
                    <ul>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/xuexiluxian/">CS学习指南<a></li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/sidebar/sanfene/nixi.html">吊打面试官</a></li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/home.html#java%E6%A0%B8%E5%BF%83">Java 核心</a></li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/home.html#java%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%BC%80%E5%8F%91">Java 企业级开发</a>
                        </li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/download/java.html">Java <b>电子书</b>下载</a></li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/download/pdf.html">PDF <b>干货笔记</b>下载</a></li>
                    </ul>
                </div>
                <div class="fl def-list-item">
                    <svg x="0px" y="0px" xml:space="preserve" class="sprite--java-menu-icon injected-svg"
                        viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" role="img" id="Javamenuicon"
                        data-src="/wp-content/uploads/aqua-svg-sprite/aqua-svg-general-sprite.svg#java-menu-icon">
                        <path
                            style="fill: rgb(70, 81, 99); stroke: rgb(255, 255, 255); stroke-width: 2px; stroke-miterlimit: 10; stroke-dasharray: 132px, 134px; stroke-dashoffset: 0px;"
                            role="presentation"
                            d="M1,21.917A20.917,20.917 0,1,1 42.834,21.917A20.917,20.917 0,1,1 1,21.917"></path>
                        <g role="presentation">
                            <g>
                                <path
                                    style="fill: rgb(99, 177, 117); stroke-dasharray: 148px, 150px; stroke-dashoffset: 0px;"
                                    d="M32.858,17.141h-4.523v-0.315c0-0.648-0.524-1.174-1.173-1.174H12.904    c-0.648,0-1.174,0.526-1.174,1.174v16.356c0,0.647,0.525,1.173,1.174,1.173h14.258c0.648,0,1.173-0.525,1.173-1.173v-3.094    c0.858-0.24,1.904-0.742,2.864-1.772c1.879-2.019,2.833-5.383,2.833-10.001C34.032,17.667,33.506,17.141,32.858,17.141    L32.858,17.141z M17.918,26.487c0.259,0.215,0.295,0.601,0.079,0.861c-0.12,0.145-0.294,0.22-0.469,0.22    c-0.138,0-0.276-0.046-0.39-0.14l-2.354-1.954c-0.139-0.118-0.221-0.288-0.221-0.471c0-0.182,0.082-0.353,0.221-0.471l2.354-1.953    c0.26-0.215,0.645-0.18,0.859,0.082c0.216,0.258,0.18,0.644-0.079,0.858l-1.787,1.483L17.918,26.487z M21.741,21.299l-2.244,7.75    c-0.078,0.268-0.321,0.44-0.586,0.44c-0.057,0-0.114-0.007-0.17-0.023c-0.324-0.094-0.511-0.433-0.416-0.757l2.243-7.749    c0.094-0.324,0.433-0.511,0.757-0.417C21.647,20.637,21.835,20.976,21.741,21.299L21.741,21.299z M25.28,25.475l-2.353,1.954    c-0.115,0.094-0.252,0.14-0.39,0.14c-0.175,0-0.348-0.075-0.47-0.22c-0.216-0.261-0.181-0.646,0.079-0.861l1.788-1.483    l-1.788-1.483c-0.259-0.215-0.294-0.601-0.079-0.858c0.215-0.262,0.6-0.297,0.86-0.082l2.353,1.953    c0.141,0.118,0.222,0.288,0.222,0.471S25.421,25.356,25.28,25.475L25.28,25.475z M28.335,27.594v-8.105h3.326    C31.445,24.936,29.728,26.901,28.335,27.594L28.335,27.594z M28.335,27.594">
                                </path>
                                <path
                                    style="fill: rgb(99, 177, 117); stroke-dasharray: 13px, 15px; stroke-dashoffset: 0px;"
                                    d="M16.369,13.028c0.124,0.061,0.254,0.089,0.382,0.089c0.32,0,0.628-0.178,0.779-0.485l1.654-3.365    c0.212-0.431,0.035-0.95-0.396-1.161c-0.43-0.212-0.949-0.034-1.161,0.396l-1.653,3.365    C15.761,12.296,15.939,12.817,16.369,13.028L16.369,13.028z M16.369,13.028">
                                </path>
                                <path
                                    style="fill: rgb(99, 177, 117); stroke-dasharray: 13px, 15px; stroke-dashoffset: 0px;"
                                    d="M21.276,13.028c0.123,0.061,0.254,0.089,0.382,0.089c0.319,0,0.628-0.178,0.779-0.485l1.655-3.365    c0.211-0.431,0.033-0.95-0.396-1.161c-0.431-0.212-0.95-0.034-1.162,0.396l-1.653,3.364C20.67,12.296,20.846,12.817,21.276,13.028    L21.276,13.028z M21.276,13.028">
                                </path>
                            </g>
                        </g>
                    </svg>
                    <h4>🐱编程喵实战项目</h4>
                    <hr>
                    <ul>
                        <li><a target="_blank" href="https://github.com/itwanger/coding-more">编程喵后端GitHub源码</a></li>
                        <li><a target="_blank" href="https://github.com/itwanger/codingmore-admin-web">编程喵前端GitHub源码</a></li>
                        <li><a target="_blank" href="http://www.codingmore.top/admin">编程喵后台</a></li>
                        <li><a target="_blank" href="http://www.codingmore.top/">编程喵前端</a></li>
                        <li><a target="_blank" href="https://github.com/itwanger/codingmore-learning">编程喵学习教程</a>
                        </li>
                    </ul>
                </div>
                <div class="fl def-list-item">
                    <svg x="0px" y="0px" xml:space="preserve" class="sprite--other-menu-icon injected-svg"
                        viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" role="img" id="Othermenuicon"
                        data-src="/wp-content/uploads/aqua-svg-sprite/aqua-svg-general-sprite.svg#other-menu-icon">
                        <circle style="fill:#465163;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" cx="21.917"
                            cy="21.917" r="20.917" role="presentation"></circle>
                        <g role="presentation">
                            <path style="fill: rgb(99, 177, 117);"
                                d="M13.644,11.983h-0.002c-0.248,0-0.481,0.097-0.657,0.272c-0.178,0.178-0.276,0.415-0.276,0.667   v14.076c0,0.516,0.422,0.937,0.94,0.938c2.185,0.006,5.846,0.461,8.371,3.104V16.309c0-0.175-0.044-0.339-0.128-0.476   C19.817,12.495,15.833,11.988,13.644,11.983L13.644,11.983z M13.644,11.983">
                            </path>
                            <path style="fill: rgb(99, 177, 117);"
                                d="M32.786,26.998V12.922c0-0.252-0.098-0.489-0.276-0.667c-0.175-0.176-0.41-0.272-0.657-0.272h-0.002   c-2.189,0.005-6.173,0.512-8.246,3.85c-0.084,0.136-0.128,0.3-0.128,0.476v14.73c2.524-2.643,6.186-3.098,8.371-3.104   C32.365,27.935,32.786,27.513,32.786,26.998L32.786,26.998z M32.786,26.998">
                            </path>
                            <path style="fill: rgb(99, 177, 117);"
                                d="M34.925,15.229h-0.682v11.769c0,1.317-1.072,2.392-2.393,2.396   c-1.854,0.003-4.909,0.367-7.073,2.414c3.743-0.916,7.688-0.32,9.938,0.192c0.28,0.064,0.57-0.002,0.796-0.181   c0.223-0.18,0.353-0.446,0.353-0.733V16.167C35.863,15.65,35.441,15.229,34.925,15.229L34.925,15.229z M34.925,15.229">
                            </path>
                            <path style="fill: rgb(99, 177, 117);"
                                d="M11.25,26.998V15.229h-0.681c-0.517,0-0.938,0.421-0.938,0.938v14.918   c0,0.288,0.129,0.555,0.353,0.732c0.225,0.18,0.515,0.247,0.796,0.183c2.249-0.513,6.195-1.108,9.938-0.192   c-2.164-2.049-5.22-2.411-7.073-2.414C12.324,29.39,11.25,28.315,11.25,26.998L11.25,26.998z M11.25,26.998">
                            </path>
                        </g>
                    </svg>
                    <h4>⭐编程知识星球</h4>
                    <hr>
                    <ul>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/zhishixingqiu/java-mianshi-zhinan.html">星球专栏：<b>Java面试指南</b></a></li>
                        <li><a target="_blank" href="https://tobebetterjavaer.com/zhishixingqiu/">星球详细介绍</a></li>
                    </ul>
                </div>
                
                <div class="fl def-list-item">
                    <svg x="0px" y="0px" xml:space="preserve" class="sprite--subsites-menu-icon injected-svg"
                        viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" role="img" id="Subsitesmenuicon"
                        data-src="/wp-content/uploads/aqua-svg-sprite/aqua-svg-general-sprite.svg#subsites-menu-icon">
                        <path
                            style="fill: rgb(70, 81, 99); stroke: rgb(255, 255, 255); stroke-width: 2px; stroke-miterlimit: 10; stroke-dasharray: 132px, 134px; stroke-dashoffset: 0px;"
                            role="presentation"
                            d="M1,21.917A20.917,20.917 0,1,1 42.834,21.917A20.917,20.917 0,1,1 1,21.917"></path>
                        <g role="presentation">
                            <path
                                style="fill: rgb(99, 177, 117); stroke-dasharray: 146px, 148px; stroke-dashoffset: 0px;"
                                d="M23.067,16.164l-1.5,2h-9.6v14.9h19.9v-16.9H23.067z M18.267,22.264h-0.7c-0.4,0-0.6,0.3-0.6,0.6   v1.7l-1.1,1l1.1,1v1.7c0,0.4,0.3,0.6,0.6,0.6h0.7v1.2h-0.7c-1,0-1.8-0.8-1.8-1.8v-1.2l-1.6-1.5l1.6-1.5v-1.2c0-1,0.8-1.8,1.8-1.8   h0.7V22.264z M20.467,30.364l-1.1-0.5l3.9-8.6l1.1,0.5L20.467,30.364z M28.067,27.164v1.2c0,1-0.8,1.8-1.8,1.8h-0.7v-1.1h0.7   c0.4,0,0.6-0.3,0.6-0.6v-1.7l1.1-1l-1.1-1v-1.7c0-0.4-0.3-0.6-0.6-0.6h-0.7v-1.2h0.7c1,0,1.8,0.8,1.8,1.8v1.2l1.6,1.5   L28.067,27.164z">
                            </path>
                            <path style="fill: rgb(99, 177, 117); stroke-dasharray: 61px, 63px; stroke-dashoffset: 0px;"
                                d="M20.967,16.964l1.5-2h9.4v-1.8h-19.9v3.8H20.967z M18.667,14.464h1.2v1.2h-1.2V14.464z    M16.267,14.464h1.2v1.2h-1.2V14.464z M13.867,14.464h1.2v1.2h-1.2V14.464z">
                            </path>
                        </g>
                    </svg>
                    <h4>💪披荆斩棘的站长</h4>
                    <hr>
                    <ul>
                        <li><a target="_blank" href="https://space.bilibili.com/513340480">哔哩哔哩</a></li>
                        <li><a target="_blank" href="https://github.com/itwanger">GitHub</a></li>
                        <li><a target="_blank" href="https://www.zhihu.com/people/cmower">知乎</a></li>
                        <li><a target="_blank" href="https://blog.csdn.net/qing_gee">CSDN</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>

    <div class="btn-back-top mobile noshow" onclick="backToTop()">
        <img src="images/back-to-top.png" />
    </div>
</body>

</html>